<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitForm">
    <div slot="body">
      <el-transfer v-model="assignRole.value" :data="assignRole.data" :titles="['未拥有', '已拥有']"
                   :props="{ key: 'id', label: 'name', disabled: 'status' }" :filterable="true"></el-transfer>
    </div>
  </zero-dialog>
</template>


<script>
import addUpdate from '@/mixins/add-update.js';

export default {
  name: 'addUpdateForm',
  mixins: [addUpdate],
  data() {
    return {
      assignRole: {
        data: [],
        value: []
      },
      addUrl: '/sysUser',
      updateUrl: '/sysUser',
      byIdUrl: '/sysUser',
      dialog: {
        id: "authRoleDialogId",
        width: '622px', //定义宽度
      },
      form: {//表单数据
        rules: { //表单验证
        }
      },
    }
  },
  methods: {
    /** 分配角色弹出 */
    initDialog(params) {
      let row = params.row
      this.dialog.title = "分配角色"
      this.form.info.id = row.id
      this.assignRole.value = []
      const config = {
        url: '/sysRole/getSelect',
        method: 'get',
        params: {userId: row ? row.id : null}
      }
      this.$axiosAuth(config).then((response) => {
        this.assignRole.data = response.data;
        //循环
        this.assignRole.data.forEach(item => {
          item.status = item.status === 'F';
          if (item.checked) {
            this.assignRole.value.push(item.id)
          }
        })
        this.dialog.open = true
      })
    },
    /** 分配角色提交 */
    submitForm(formInfo) {
      let loading = this.$loading({target: `#${this.dialog.id} >div >.el-dialog`});
      let config = {
        url: "/sysUser/assignRole",
        method: 'put',
        data: {
          id: this.form.info.id,
          idSet: this.assignRole.value
        }
      }
      this.$axiosAuth(config).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.dialog.open = false;
        this.getDataList()
      }).finally(() => {
        loading.close()
      });
    }
  }
}
</script>
